<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{position: absolute;width: 100px;height: 100px;left:0;}

        .box1{background: red;top:0;}

        .box2{background: green; top:110px;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<script>

    // 公共类
    class PublicDrag{
        constructor(ele){
            this.ele = ele;
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.ele.addEventListener("mousedown",function(eve){
                that.downE = eve || window.event;
                that.down();
            })
        }
        down(){
            const that = this;
            document.onmousemove = function(eve){
                that.moveE = eve || window.event;
                that.move();
            }
            document.onmouseup = function(){
                that.up();
            }
        }
        up(){
            document.onmousemove = document.onmouseup = null;
        }
    }

    class Drag extends PublicDrag{
        constructor(ele){
            super(ele)
        }
        move(){
            this.ele.style.left = this.moveE.pageX - this.downE.offsetX + "px";
            this.ele.style.top = this.moveE.pageY - this.downE.offsetY + "px";
        }
    }
    
    class SmallDrag extends PublicDrag{
        constructor(ele){
            super(ele)
        }
        move(){
            let l = this.moveE.pageX - this.downE.offsetX;
            let t = this.moveE.pageY - this.downE.offsetY;
            if(l<0) l=0;
            if(t<0) t=0;
            this.ele.style.left = l + "px";
            this.ele.style.top = t + "px";
        }
    }


    const obox1 = document.querySelector(".box1");
    const obox2 = document.querySelector(".box2");

    new Drag(obox1);
    // new Drag(obox2);

    // new SmallDrag(obox1);
    new SmallDrag(obox2);


</script>
</html>